<template>
	<div>
		<div class="container">
			<h2 class="text-center py-2">{{ title }}</h2>

			<div class="plan-info">
				<a-row :gutter="20">
					<a-col :span="8">计划名称：{{ planInfo.name }}</a-col>
					<a-col :span="8">计划时间：{{ create_time }}</a-col>
				</a-row>
			</div>

			<div style="margin-bottom: 12px;">
				<a-button @click="handleExport">导出数据</a-button>
			</div>
			<a-table :columns="columns" :pagination="false" :data-source="summarySource">
				<template #headerCell="{ column }">
					<template v-if="column.key === 'qty'">
						<a-tooltip>
							<template #title>{{ column.info }}</template>
							{{ column.title }}
						</a-tooltip>
					</template>
				</template>
			</a-table>

			<div class="text-center mt-4">
				<a-button @click="closeTab('/plan')">
					<close-outlined />关闭
				</a-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="jsx">
import { inject, onMounted, ref, computed } from "vue";
import { CloseOutlined } from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import { post } from "../utils";
import { exportData } from "../utils/exportData";
import dayjs from "dayjs";
import { add, subtract } from "@/utils/operation.js";
const route = useRoute();

const planInfo = ref({})
const pointData = ref([])
post("department/info", { id: route.query.project_id }).then(d => {
	//获取工号
	pointData.value = d.pointData;
});
post("plan/info", { id: route.params.id }).then(data => {
	planInfo.value = data
});

const columns = computed(() => {
	const columns = [
		{
			title: "序号",
			dataIndex: "id",
			key: "id",
			align: "center",
			fixed: "left"
		},
		{
			title: "物资名称",
			dataIndex: "name",
			sorter: false,
			key: "name",
			ellipsis: true
		},
		{
			title: "规格型号",
			dataIndex: "model",
			sorter: false,
			key: "model",
			ellipsis: true
		},
		{
			title: "计量单位",
			dataIndex: "unit",
			key: "unit",
			align: "center"
		}
	];

	pointData.value.forEach((p, i) => {
		columns.push({
			title: p.name,
			dataIndex: p.id,
			extra: p.id,
			align: "center",
		});
	});

	columns.push(
		{
			title: "合计",
			dataIndex: "total",
			width: 120,
			key: "heji",
			align: "center",
			fixed: 'right'
		}
	);

	return columns;
});

const summarySource = ref([]);
onMounted(() => {
	const { id } = route.params;
	post("plan/summarygh", { id }).then(data => {
		const groupByMetariel = data.reduce((res, curr) => {
			if (!res[curr.material_id]) {
				res[curr.material_id] = []
			}
			res[curr.material_id].push(curr)
			return res
		}, {})

		const result = []
		Object.keys(groupByMetariel).forEach(key => {
			const groupData = groupByMetariel[key]
			const total = groupData.reduce((res, curr) => {
				res = add([res, (curr.gonghao_qty || 0)]);
				return res
			}, 0)
			const gonghaoCountRes = groupData.reduce((res, curr) => {
				if (!res[curr.gonghao_id]) {
					res[curr.gonghao_id] = 0
				}
				res[curr.gonghao_id] = add([res[curr.gonghao_id], (curr.gonghao_qty || 0)])
				return res
			}, {})
			const target = data.find(item => String(item.material_id) === key)
			result.push({
				...target.material,
				unit: target.unit,
				...gonghaoCountRes,
				total
			})
		})
		summarySource.value = result;
	});
});

const create_time = computed(() => {
	return dayjs(planInfo.value.create_time).format("YYYY-MM-DD HH:mm:ss"); 
});

const title = computed(() => {
	return `${planInfo.value.project?.name}工号计划汇总表`
})

const handleExport = () => {
	exportData(columns.value, summarySource.value, `${title.value}.xlsx`)
}

const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}

.plan-info {
	font-size: 14px;
	line-height: 40px;
	margin: 15px 0;
}
</style>
